<script setup lang="ts">
import { computed, h, onBeforeUnmount, useSlots, watch } from 'vue'
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseLoading from './BaseLoading.vue'

// 已封装命令式弹窗useDialog,需要改，需要加找jose。。。。。
interface Props {
  title?: string
  show?: boolean
  icon?: string
  iconPosition?: 'left' | 'right'
  showClose?: boolean
  size?: Array<string | number>
  showLoading?: boolean
  showHeader?: boolean
  bgColor?: string
  noPadding?: boolean
  zIndex?: number
  closeCb?: () => void
}
const props = withDefaults(defineProps<Props>(), {
  title: '标题',
  icon: '',
  iconPosition: 'left',
  show: true,
  showClose: false,
  showLoading: false,
  showHeader: true,
  noPadding: false,
  zIndex: 102,
  closeCb: () => { },
})
const emit = defineEmits(['update:show', 'beforeUnmount', 'close'])

const slots = useSlots()

const getIndex = computed(() => props.zIndex)
const dialogStyles = computed(() => {
  const _width = !props.size || !props.size[0]
    ? '90%'
    : typeof props.size[0] === 'number'
      ? `${props.size[0]}rem`
      : String(props.size[0])

  const _height = !props.size || !props.size[1]
    ? '80%'
    : typeof props.size[1] === 'number'
      ? `${props.size[1]}rem`
      : String(props.size[1])

  const _bgColor = props.bgColor || '#242626'

  return {
    '--bc-dialog-container-max-width': _width,
    '--bc-dialog-container-max-height': _height,
    '--bc-dialog-container-bg': _bgColor,
  }
})

function setClassName(name: string) {
  return `bc-dialog-${name}`
}

function renderHeader(params: { name: string }) {
  if (!props.showHeader) {
    return null
  }
  const headerVNode = slots.title?.()
  if (headerVNode) {
    return headerVNode
  }

  const iconVNode = props.icon ? h(BaseIcon, { name: params.name }) : null
  const headerTitle = props.iconPosition === 'left'
    ? [iconVNode, h('div', { class: [setClassName('header'), 'text-center text-base'] }, props.title)]
    : [h('div', { class: [setClassName('header'), 'text-base'] }, props.title), iconVNode]

  const header = props.showClose
    ? [h('div', { class: 'flex justify-between items-center' }, [headerTitle, h('div', { onClick: () => close(), class: 'cursor-pointer' }, [h(BaseButton, { class: 'size-[1.75rem] bg-[#4A5354] center rounded-md', type: 'none' }, () => h(BaseIcon, { name: 'uni-close2', class: 'text-xs ' }))])])]
    : headerTitle

  return header
}
function renderContent() {
  const contentVNode = slots.default?.()
  return contentVNode
}

function close() {
  props?.closeCb()
  emit('close')
}
onBeforeUnmount(() => {
  emit('beforeUnmount')
})
watch(
  () => props.show,
  (val) => {
    if (val) {
      document.body.style.overflow = 'hidden'
    }
    else {
      document.body.style.overflow = ''
    }
  },
)
</script>

<template>
  <Transition name="bc-dialog">
    <div
      v-show="show" :class="[setClassName('wrapper')]" :style="{ '--bc-dialog-wrapper-z-index': getIndex }"
      @click="emit('close')"
    >
      <div :class="[setClassName('container'), { noPadding }]" :style="dialogStyles" @click.stop>
        <renderHeader :name="props.icon" />

        <Suspense timeout="0">
          <renderContent />
          <template #fallback>
            <div v-if="showLoading" class="center dialog-loading-height">
              <BaseLoading />
            </div>
          </template>
        </Suspense>
      </div>
    </div>
  </Transition>
</template>

<style>
:root {
  --bc-dialog-container-min-width: 21rem;
  --bc-dialog-container-min-height: 10rem;
  --bc-dialog-container-bg: #242626;
  --bc-dialog-container-radius: 0.25rem;
  --bc-dialog-container-padding: .8rem;
  --bc-dialog-wrapper-z-index: 102;
}
</style>

<style scoped lang="scss">
.bc-dialog-enter-active,
.bc-dialog-leave-active{
  transition: all 0.2s ease;
}
.bob-animal-enter-from,
.bob-animal-leave-to {
  background-color: rgba(16,18,18,0);
}

.bob-animal-enter-to,
.bob-animal-leave-from {
  background-color: rgba(16,18,18,0.8);
}

.bc-dialog-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(16,18,18,0.8);
  z-index: var(--bc-dialog-wrapper-z-index);
  min-height: calc(100% + 1px);

  .bc-dialog-container {
    overflow-y: auto;
    overflow-x: hidden;
    min-width: var(--bc-dialog-container-min-width);
    min-height: var(--bc-dialog-container-min-height);
    max-width: var(--bc-dialog-container-max-width);
    max-height: var(--bc-dialog-container-max-height);
    background-color: var(--bc-dialog-container-bg);
    border-radius: var(--bc-dialog-container-radius);
    padding: var(--bc-dialog-container-padding);
  }
}

.noPadding {
  padding: 0;
}
</style>
